import Vue from 'vue'
import Router from 'vue-router'
// 引入路由模块
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'

// 使用router插件，会在全局上注册router-view和router-link全局组件
// 会为vue扩展一个属性$router和$route
Vue.use(Router)

/* Layout */
// 引入Layout布局的页面
import Layout from '@/layout'

// 动态路由表，项目中不同的用户可以访问不同的功能
// 动态路由规则
export const asyncRoutes = [
  employeesRouter,
  settingRouter,
  permissionRouter,
  socialRouter,
  approvalsRouter,
  attendancesRouter,
  salarysRouter,
  departmentsRouter
]

// 静态路由表(路由规则对象数组)
export const constantRoutes = [
  // 登录页
  {
    path: '/login', // 路径
    // 问题:
    // 如果都是在上面import一起引入这些页面组件
    // 在webpack打包代码的时候，会一起打包进app.js中，然后插入到index.html执行
    // 这样就导致了首屏加载了一些本来不需要显示的其他页面组件的(相关代码)
    // 导致首屏加载过慢I
    // 解决方案:
    // webpack提供了import导入函数，可以去导入对应的模块，原地返回的是一个promise

    // 写法
    // component:()=>import('组件文件的路径')

    // 在webpack打包代码的时候，就会给这些组件分成多个js文件，而app.js里代码会变少
    // 这样导致首屏只会加载对应一个页面的js代码(加速首屏打开速度)
    component: () => import('@/views/login/index'), // 跳转组件
    hidden: true // 控制侧边栏是否显示导航路径
  },

  // 404页
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  // 首页
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard', // 默认打开的项目，默认路由地址/，立即改变url地址栏路由地址(会重新进行路由表的path匹配)
    children: [{ // 子路由
      path: 'dashboard',
      name: 'Dashboard',
      // webpackChunkName用来定义懒加载时dist下的js文件名
      component: () => import(/* webpackChunkName: "Login"*/ '@/views/dashboard/index'), // 挂载layout右下角(AppMain.vue中)
      meta: { title: '首页', icon: 'dashboard' } // meta固定名字，用来给当前路由对象添加额外信息(meta用于生成左侧菜单项的标题和图形)
    }]
  },

  // 上传页
  {
    path: '/excel',
    component: Layout,
    children: [{
      path: '',
      component: () => import('@/views/excel/index')
    }]
  }

  // 路由匹配顺序从上到下，最后设置完全匹配不到的路由信息
  // { path: '*', redirect: '/404', hidden: true }
]

// 创建路由
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 组合到一起组成路由表
  // routes: [...constantRoutes, ...asyncRoutes] // 传入路由规则数组(注册路由表)   这里有静态和动态的
  routes: [...constantRoutes] // 这里只有静态的，动态的进行动态添加
})

const router = createRouter() // 路由对象

// 最后权限设计会使用这个方法
export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
  // 重置的是路由对象内部match方法(匹配routes选项中的路由规则的)
}

export default router // 路由对象导出
